<template>
  <van-notice-bar
      left-icon="volume-o"
      text="欢迎来到伙伴匹配系统，我是主角李万洋，我很喜欢java。"
  />
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item style="color: blue;font-family: 幼圆,serif">你还单身着吗？</van-swipe-item>
    <van-swipe-item>没人给你买奶茶是吗？</van-swipe-item>
    <van-swipe-item>没人给你带饭是吗？</van-swipe-item>
    <van-swipe-item>校园琐事想吐槽是吗？</van-swipe-item>
  </van-swipe>

  <user-card-list :user-list="userList" />
  <van-empty v-if="!userList||userList.length<1" description=":(数据为空" />


</template>
<script setup >
import {onMounted, ref} from 'vue';
import {useRoute} from "vue-router";
import myAxios from "../plugins/myAxios.ts";
import qs from 'qs';
import {Toast} from "vant";
import UserCardList from "../components/UserCardList.vue";

const route = useRoute();
const {tags} = route.query;

const userList = ref([]);
let userListData=([])

onMounted(async () => {
  userListData = await myAxios.get('/user/recommend', {
    params: {
      pageNum:1,
      pageSize:8
    },
    paramsSerializer: params => {
      return qs.stringify(params, {indices: false})
    }
  })
      .then(function (response) {
        console.log('/user/recommend succeed', response);
        Toast('给您推荐了一些用户哦~')
        return response?.data?.records;
      })
      .catch(function (error) {
        console.error('/user/recommend error', error);
        Toast.fail('请求失败');
      })
  if (userListData) {
    userListData.forEach(user => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }
})


// const mockUser = {
//   id: 12345,
//   username: '鱼皮',
//   userAccount: '12314',
//   profile: '一名精神小伙，目前还有头发，谢谢大家，阿爸爸阿爸爸阿巴阿巴阿巴',
//   avatarUrl: '',
//   gender: 0,
//   phone: '13113113111',
//   email: '592342843721987@xzcxzczxcz.com',
//   userRole: 0,
//   planetCode: '1234',
//   tags: ['java', 'emo', '打工中', 'emo', '打工中'],
//   createTime: new Date(),
// }




</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 120px;
  text-align: center;
  background-color: rgba(66, 68, 61, 0.3);
}
</style>